<template>
  <div class="rated">
    <p class="title">最受好评电影</p>
    <div class="wrapper">
      <ul>
        <ListRatedItem v-for="item in ratedList" :key="item._id" :item="item" />
      </ul>
    </div>
  </div>
</template>

<script>
import ListRatedItem from "./ListRatedItem.vue";
import BScroll from "better-scroll";
import { mapActions, mapState } from "vuex";

export default {
  components: {
    ListRatedItem,
  },
  // computed: mapState(["ratedList"]),
  computed: mapState({
    ratedList: (state) => state.rated.ratedList,
  }),
  async mounted() {
    await this.getRatedListAsync();
    new BScroll(".wrapper", {
      scrollX: true,
      scrollY: false,
      click: true,
    });
  },
  methods: {
    ...mapActions("rated", ["getRatedListAsync"]),
    // async getData() {
    //   const res = await ratedApi();
    //   this.ratedList = res.result;

    //   // 需要等待渲染结束，结束以后ul才有宽度，才能添加bs
    //   await this.$nextTick();
    //   new BScroll(".wrapper", {
    //     scrollX: true,
    //     scrollY: false,
    //     click: true,
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.rated {
  width: 100%;
  height: 205px;
  padding: 12px 15px;
  background: #fff;

  .title {
    font-size: 14px;
    color: #333;
    margin: 0 0 12px;
  }

  .wrapper {
    overflow: hidden;
  }

  ul {
    height: 150px;
    display: inline-flex;
  }
}
</style>
